<template>
    <div class="select-type">
        <cube-scroll-nav-bar
                id="select-type"
                :current='current'
                :labels="coupon_labels"
                @change="change" />
    </div>
</template>

<script>
import { mapState } from "vuex"
export default {
    name: "select-type",
    data () {
        return {
            current: '全部'
        }
    },
    props: {
        index: {
            type: Number,
            default: 0
        }
    },
    watch: {
      index () {
          this.current = this.coupon_labels[this.index]
      }
    },
    computed: {
        // 选择列表文字
        coupon_labels() {
          let data = ["全部"]
          this.labels.forEach((item) => {
            data.push(item)
          })
          return data
        },
        // 选择列表value
        coupon_value() {
            let data = ["all"]
            this.value.forEach((item) => {
                data.push(item)
            })
            return data
        },
        ...mapState({
            labels: "coupon_labels",
            value: "coupon_value"
        })
    },
    mounted() {
        this.$emit("loaded", this.coupon_value)
    },
    methods: {
        /**
         * nav改变
         * @param value
         */
        change(value) {
            for(let i=0;i<this.coupon_labels.length;i++){
                if(value === this.coupon_labels[i]) {
                    this.$emit("change", i)
                    break;
                }
            }
        }
    }
}
</script>

<style scoped lang="less" src="./select-type.less"></style>
